#sidebar
  @media mg-large
    display: none
  @media mq-large
    column(sidebar-column)
    height: inherit

[data-theme="dark"] .sidebar-wrap
  box-shadow: 0 0 10px 3px var(--color-hover-shadow)

[data-theme="dark"] #mobile-nav .sidebar-wrap
  box-shadow: 0 0 0 0

.sidebar-wrap
  width: 100%
  border-radius: post-radius
  background: var(--color-wrap)
  display: flex
  flex-shrink: 0
  flex-direction: column
  justify-content: center
  align-items: center
  box-shadow: unset
  transition: all 0.3s ease

  .hidden
    display: none

  &.wrap-sticky
    position: sticky
    top: 5px

  &:hover
    transform: scale(1.015)
    box-shadow: 0 0 10px 3px var(--color-hover-shadow)

  #mobile-nav &:hover
    transform: scale(1)
    box-shadow: 0 0 0 0

.sidebar-author
  display: flex
  flex-shrink: 0
  flex-direction: column
  justify-content: center
  align-items: center

  img
    display: block
    min-width: 100px
    min-height: 100px
    width: 100px
    height: 100px
    border-radius: 50%
    transition: opacity 0.3s ease
    opacity: 0
    object-fit: cover
    margin: 20px
    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.2)

  img.lazyloaded
    opacity: 1
    animation: blur 0.8s ease forwards

  .sidebar-author-name
    font-weight: bold
    font-size: 20px
    color: #ff7777
    margin: 10px

  .sidebar-description
    color: #777777

$sidebar-state-content
  display: flex
  flex-direction: column
  flex-shrink: 0
  align-items: center
  justify-content: center
  padding: 0 20px

  div
    margin: 5px 0

.sidebar-state
  display: flex
  justify-content: center
  padding: 25px 0
  color: var(--red-0)
  opacity: 0.6
  transition: opacity 0.5s ease

  &:hover
    opacity: 1

  .sidebar-state-article
    @extend $sidebar-state-content
    border-right: 1px solid rgba(255, 0, 0, 0.5)

  .sidebar-state-category
    @extend $sidebar-state-content

  .sidebar-state-tag
    @extend $sidebar-state-content
    border-left: 1px solid rgba(255, 0, 0, 0.5)

  .sidebar-state-number
    font-weight bold
    font-size: 20px

.sidebar-social
  display: flex
  flex-shrink: 0
  justify-content: center
  align-items: center
  width: 70%
  flex-wrap: wrap

  div a
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

$siderbar-social-icon
  position: relative
  font-size: 20px
  width: 36px
  height: 25px
  display: flex
  justify-content: center
  align-items: center
  font-family: font-icon

.icon-github
  @extend $siderbar-social-icon
  color: #191717

  &:before
    content: "\f09b"

.icon-google
  @extend $siderbar-social-icon
  color: #4285F4

  &:before
    content: "\f0d5"

.icon-facebook
  @extend $siderbar-social-icon
  color: #3b5998

  &:before
    content: "\f09a"

.icon-twitter
  @extend $siderbar-social-icon
  color: #191717

  &:before
    content: "\e61b"

.icon-instagram
  @extend $siderbar-social-icon
  color: #e1306c

  &:before
    content: "\f16d"

.icon-linkedin
  @extend $siderbar-social-icon
  color: #0e76a8

  &:before
    content: "\f08c"

.icon-pinterest
  @extend $siderbar-social-icon
  color: #bd081c

  &:before
    content: "\f0d2"

.icon-youtube
  @extend $siderbar-social-icon
  color: #ff0000

  &:before
    content: "\f167"

.icon-vimeo
  @extend $siderbar-social-icon
  color: #1ab7ea

  &:before
    content: "\f194"

.icon-flickr
  @extend $siderbar-social-icon
  color: #ff0084

  &:before
    content: "\f16e"

.icon-dribbble
  @extend $siderbar-social-icon
  color: #ea4c89

  &:before
    content: "\f17d"

.icon-behance
  @extend $siderbar-social-icon
  color: #1769ff

  &:before
    content: "\f1b4"

.icon-bilibili
  @extend $siderbar-social-icon
  color: #00a1d6

  &:before
    content: "\e3d9"

.icon-weibo
  @extend $siderbar-social-icon
  color: #e6162d

  &:before
    content: "\f18a"

.icon-zhihu
  @extend $siderbar-social-icon
  color: #0084ff

  &:before
    content: "\f63f"

.icon-douban
  @extend $siderbar-social-icon
  color: #007722

  &:before
    content: "\f264"

.icon-reddit
  @extend $siderbar-social-icon
  color: #ff4500

  &:before
    content: "\f1a1"

.icon-tumblr
  @extend $siderbar-social-icon
  color: #35465c

  &:before
    content: "\f173"

.icon-medium
  @extend $siderbar-social-icon
  color: #00ab6c

  &:before
    content: "\f23a"

.icon-deviantart
  @extend $siderbar-social-icon
  color: #05cc47

  &:before
    content: "\f1bd"

.icon-stackoverflow
  @extend $siderbar-social-icon
  color: #f48024

  &:before
    content: "\f16c"

.icon-keybase
  @extend $siderbar-social-icon
  color: #33a0ff

  &:before
    content: "\f4f5"

.icon-telegram
  @extend $siderbar-social-icon
  color: #0088cc

  &:before
    content: "\f2c6"

.icon-discord
  @extend $siderbar-social-icon
  color: #7289da

  &:before
    content: "\f392"

.icon-steam
  @extend $siderbar-social-icon
  color: #171a21

  &:before
    content: "\f1b6"

$menu-link
  color: var(--red-0)
  opacity: 0.8
  text-decoration: none
  text-shadow: 0 1px rgba(0, 0, 0, 0.2)
  transition: opacity 0.2s
  display: block
  padding: 10px 15px

.sidebar-menu
  margin: 20px 0
  width: 100%

.sidebar-menu-link-wrap
  margin: 8px 50px
  display: flex
  position: relative

  justify-content: center
  border: 10px rgba(255, 0, 0, 0.3) double
  border-radius: 10px
  transition: border 0.5s ease

  &:hover
    border: 10px var(--color-h2-after) double

  &:hover .sidebar-menu-icon
    transform: rotate(360deg)

.sidebar-menu-icon
  @extend $menu-link
  background: url("/images/taichi.png") no-repeat center / 80%
  transform: rotate(0deg)
  transition: transform 1s ease

.sidebar-menu-link-dummy
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0

.sidebar-menu-link
  @extend $menu-link
  pointer-events: none

.link-active
  background: var(--red-0)
  border: 10px var(--color-wrap) double
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.3)
  opacity: 0.8
  transition: border opacity 0.5s ease

  &:hover
    opacity: 1

  .sidebar-menu-link
    color: #fff
    opacity: 1

  .sidebar-menu-icon
    opacity: 1
    background: url("/images/taichi-fill.png") no-repeat center / 80%

.sidebar-top
  position: fixed
  bottom: 30px
  right: 30px
  width: 50px
  height: 50px
  background-color: var(--color-wrap)
  border-radius: 50%
  font-family: font-icon
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
  z-index: 999
  transition: all 0.3s ease

  img
    transition: all 0.3s ease
    animation: rotate-all 3s infinite
    animation-timing-function: linear
    opacity: 1

  .arrow-up
    transition: all 0.3s ease
    opacity: 0
    &:before
      width: 50px
      height: 50px
      position: absolute
      content: "\f062"
      color: var(--red-1)
      font-size: 20px
      top: 0
      text-align: center
      line-height: 50px

  &:hover
    img
      opacity: 0
    .arrow-up
      opacity: 1

.sidebar-toc
  width: 100%
  padding: 10px 20px
  box-sizing: border-box

.sidebar-toc-wrapper
  max-height: calc(100vh - 120px)
  overflow: auto

  &::-webkit-scrollbar
    width: 5px
    height: 5px

.sidebar-toc-wrapper
  color: var(--color-link)
  a, span
    color: var(--color-link)
    text-decoration: none
    opacity: 0.8
    transition: all 0.3s ease

    &:hover
      color: var(--red-0)

  & ol
    margin-left: 15px
    list-style: none

  & li
    margin: 10px 0

    &:before
      content: ""
      width: 5px
      height: 10px
      background: var(--color-h2-after)
      display: inline-block
      vertical-align: middle
      margin-right: 11px
      box-shadow: 0 2px 12px var(--color-h2-after-shadow)
      opacity: 0.5
      transition: all 0.3s ease

    &:hover
      &:before
        width: 5px
        height: 5px
        border-radius: 50%
        opacity: 1

  .toc-level-1
    list-style: none

    &:before
      display: none
    >a
      width: 100%
      display: inline-block
      text-align: center

  .toc-child 
    display: none;

  .active>.toc-child 
    display: block;

  .current>.toc-child 
    display: block;

    >.toc-item 
      display: block;

  .active>a
    color: var(--red-0)
    opacity: 1

    &>span
      color: var(--red-0)
      opacity: 1

  .current>a
    color: var(--red-0)
    opacity: 1

    &>span
      color: var(--red-0)
      opacity: 1

.toc-title
  letter-spacing: 2px
  color: var(--color-grey)
  line-height: 1em
  font-weight: bold
  padding: 10px 0

.toc-item 
  // overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

$siderbar-btn-icon
  width: 40px
  height: 40px
  background: var(--red-3)
  color: white
  font-weight: bold
  box-shadow: 0 2px 12px rgba(255, 78, 106, 0.55)
  border-radius: post-radius
  display: flex
  justify-content: center
  align-items: center
  margin: 20px
  transition: all 0.3s ease

  [data-theme="dark"] &
    filter: brightness(0.8)

.sidebar-btn-wrapper
  display: flex
  justify-content: center
  position: absolute
  bottom: 10px
  left: 0
  right: 0

  .current
    background: var(--red-1)

  .sidebar-toc-btn
    @extend $siderbar-btn-icon
    &:before
      font-family: font-icon
      content: "\f0e8"

  .sidebar-common-btn
    @extend $siderbar-btn-icon
    &:before
      font-family: font-icon
      content: "\e3af"

.sidebar-common-sidebar
  display: flex
  flex-direction: column
  width: 100%
  justify-content: center
  align-items: center

.sidebar-toc-sidebar
  width: 100%
